<template>
  <div class="content">
    <div class="contentscroll">
      <div class="content-header">
        <img src="../assets/meishi.png" alt="">
        <van-icon class="left" @click="back" name="arrow-left" size="20" />
        <van-icon class="search" name="search" size="20" />
      </div>
      <div class="content-content">
        <div class="content-content_header">
          <div class="image">
            <img :src="shopdetail.backgroundImg" alt="" />
          </div>
          <div class="content-content-header_title">
            <span class="content-content_title">{{ shopdetail.shopname }}</span>
          </div>
          <div class="content-content_dec">
            <span class="grade">★{{ shopdetail.shopgrade }}&emsp;</span>
            <span class="num">月售{{ shopdetail.monthsell }}&emsp;</span>
            <span class="time">配送约{{ shopdetail.selltime }}分钟</span>
          </div>
          <div class="content-content_pulic">
            <span class="public">公告:{{ shopdetail.public }}</span>
          </div>
        </div>
        <van-tabs
          v-model:active="changeType"
          line-width="30"
          color="#FFCC4D"
          sticky
          @click-tab="onClickTab"
        >
          <van-tab class="order" title="点菜">
            <van-sticky :offset-top="45" z-index="0">
              <div class="sideContent" ref="myRef">
                <div class="sidebar">
                  <div
                    class="order-item"
                    v-for="(item, index) in classify"
                    :key="index"
                    :class="{'sideactive':sideActive === index, 'last':sideActive === index-1, 'next':sideActive === index+1}"
                    @click="sideclick(index)"
                  >
                    <div class="itemtab">{{ item.classifyname }}</div>
                  </div>
                </div>
              </div>
            </van-sticky>
            <div class="tabswrap">
              <div class="tabswrap__items">
                <Detailclassify
                  v-for="item in classify"
                  :key="item.classifytype"
                  :classitem="item"
                  :itemlist="itemlist"
                  :ref="setref"
                ></Detailclassify>
              </div>
            </div>
            <Shopcart :truefee="shopdetail.truefee"></Shopcart>
          </van-tab>
          <van-tab title="评价">
            <div class="totalcomment">
              <div class="leftnumber">{{ shopdetail.shopgrade }}</div>
              <div class="kouwei">
                <div class="kouwei-text">口味</div>
                <div class="kouwei-number">{{ shopdetail.test }}</div>
              </div>
              <div class="baozhuang">
                <div class="baozhuang-text">包装</div>
                <div class="baozhuang-number">{{ shopdetail.look }}</div>
              </div>
              <div class="manyi">
                <div class="manyi-text">配送满意度</div>
                <div class="manyi-number">{{ shopdetail.manyi }}%</div>
              </div>
            </div>
            <div class="comment">
              <div class="comment-bar">
                <div class="comment-wrap">
                  <div class="comment-bar-icon">
                    <div class="span-wrap">
                      <i class="iconfont icon-meituan1"></i>
                      <span>外卖评价</span>
                    </div>
                  </div>
                  <div class="comment-daodian">到店评价</div>
                </div>
              </div>
              <div
                class="commentitem"
                v-for="(item, index) in comment"
                :key="index"
              >
                <div class="commentheader">
                  <div class="headercontent">
                    <div class="thumb">
                      <img
                        src="../assets/thumb.png"
                        alt=""
                      />
                    </div>
                    <div class="users">
                      <div class="usersname">{{ item.username }}</div>
                      <div class="commenttime">2022.4.11</div>
                    </div>
                  </div>
                  <van-icon name="ellipsis" />
                </div>
                <div class="commenttext">{{ item.text }}</div>
              </div>
              <div class="footer">暂无更多评论</div>
            </div>
          </van-tab>
          <van-tab title="商家">
            <div class="seller">
              <img :src="shopdetail.shopImg" alt="" />
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import {
  computed,
  nextTick,
  onBeforeUnmount,
  onMounted,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
import Detailclassify from "@/components/Detailclassify";
import Shopcart from "../components/Shopcart.vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { getLocal, setLocal } from "../common/utils";
import { reqClassify, reqItemlist, reqComment } from "../api";
export default {
  setup() {
    const state = reactive({
      classify: [],
      itemlist: [],
      comment: [],
      sideActive: 0,
    });
    const store = useStore();
    const router = useRouter();
    const changeType = ref(0);
    const myRef = ref(null);
    const route = useRoute();
    const classifyref = ref([]);
    onMounted(async () => {
      console.log(store.state.shopdetail);
      let id = route.params.id;
      if (getLocal(`store${id}`)) {
        console.log("走通了-------------------");
        store.replaceState(JSON.parse(getLocal(`store${id}`)));
      } else {
        // 获取商铺商品列表
        const itemdata = await reqItemlist(store.state.shopdetail.shoptype);
        store.state.itemlist = itemdata.mess;
        // 获取分类数据
        const classify = await reqClassify(store.state.shopdetail.shoptype);
        store.state.classify = classify.mess;
        // 获取商铺评论数据
        const comment = await reqComment(store.state.shopdetail.shoptype);
        store.state.comment = comment.mess;
      }
      state.comment = store.state.comment;
      state.itemlist = store.state.itemlist;
      state.classify = store.state.classify;
      nextTick(() => {
        let sideBS = new BScroll(myRef.value, {
          click: true,
        });
        window.addEventListener("scroll", scroll);
        sideBS;
      });
    });

    const shopdetail = computed(() => {
      return store.state.shopdetail;
    });
    const onClickTab = (e) => {
      if (e.name !== 0) {
        state.sideActive = 0;
      }
    };
    // 获取dom元素的高度
    const setref = async (el) => {
      nextTick(() => {
        if (classifyref.value.length !== state.classify.length) {
          classifyref.value.push(el.$el.offsetTop);
        }
      });
    };
    const sideclick = (e) => {
      state.sideActive = e;
      window.scrollTo({
        top: classifyref.value[e] + 140,
      });
    };
    const back = () => {
      router.go(-1);
    };
    function scroll() {
      let isBottom =
        document.documentElement.scrollHeight -
        window.innerHeight -
        window.pageYOffset;
      for (let i = 0; i < classifyref.value.length; i++) {
        if (window.pageYOffset >= classifyref.value[i] + 137 && isBottom >= 1) {
          state.sideActive = i;
        }
      }
    }
    onBeforeUnmount(() => {
      window.removeEventListener("scroll", scroll);
    });
    // getChange与watch组合监听store.state的数据变化
    const getChange = computed(() => {
      return store.state;
    });
    watch(
      getChange,
      () => {
        setLocal(`store${route.params.id}`, JSON.stringify(store.state));
      },
      { deep: true }
    );
    return {
      ...toRefs(state),
      shopdetail,
      changeType,
      sideclick,
      myRef,
      back,
      classifyref,
      setref,
      onClickTab,
      getChange,
    };
  },
  components: {
    Detailclassify,
    Shopcart,
  },
};
</script>

<style lang="less" scoped>
.content {
  -webkit-overflow-scrolling: touch;
  width: 100%;
  position: relative;
  .content-header {
    color: #fff;
    background-size: 100%;
    display: flex;
    width: 100%;
    height: 12vh;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10px;
    align-items: center;
    position: relative;
    img {
      position: absolute;
      width: 100%;
      transform: translatex(-10px);
      z-index: -1;
    }
    .left,
    .search {
      z-index: 3;
    }
  }
  .content-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.2);
    height: 16.5vh;
    z-index: 0;
  }
  .content-content {
    width: 100%;
    height: auto;
    .content-content_header {
      position: relative;
      background: #fff;
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 8px 10px;
      border-top-left-radius: 11px;
      border-top-right-radius: 11px;
      min-width: 0;
      min-height: 88px;
      .image {
        border: 1px solid #fff;
        border-radius: 8px;
        position: absolute;
        width: 72px;
        height: 72px;
        grid-template: 88px;
        right: 20px;
        transform: translateY(-20px);
        overflow: hidden;
        z-index: 3;
        img {
          border-radius: 8px;
          width: 100%;
          height: 100%;
        }
      }
      .content-content_title {
        max-height: 32px;
        font-weight: 800;
        line-height: 30px;
        font-size: 20px;
      }
      .grade {
        color: #fd8000;
        font-size: 15px;
        font-weight: 700;
      }
      .time,
      .num {
        color: #a8aaaa;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
      }
      .public {
        color: #a8aaaa;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 15px;
      }
    }
  }
  .order {
    display: flex;
    .sideContent {
      background: #f6f8f8;
      overflow: hidden;
      height: 100%;
      touch-action: none;
      .sidebar {
        background: #fff;
        width: 10.1vh;
        display: block;
        .order-item {
          position: relative;
          display: block;
          box-sizing: border-box;
          padding: 20px 12px;
          overflow: hidden;
          font-size: 14px;
          line-height: 20px;
          cursor: pointer;
          user-select: none;
          background: #f6f8f8;
          color: #323233;
          .itemtab {
            word-break: break-all;
            position: relative;
            display: inline-block;
            color: #323233;
          }
        }
        .sideactive {
          background: #fff;
          font-weight: 600;
        }
        .last {
          border-top-right-radius: 10px;
        }
        .next {
          border-bottom-right-radius: 10px;
        }
      }
    }
    .tabswrap {
      background: #fff;
      flex: 1;
      margin-bottom: 7vh;
    }
  }
  .totalcomment {
    display: flex;
    width: 100%;
    height: 70px;
    padding: 5px 18px;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
    border-top: 1px solid #f3efef;
    border-bottom: 8px solid #f3efef;
    .leftnumber {
      font-size: 30px;
      color: #fd7900;
    }
    .kouwei {
      .kouwei-text {
        font-size: 12px;
        color: #c1bbbb;
      }
      .kouwei-number {
        font-weight: 600;
        box-sizing: border-box;
        padding-top: 5px;
      }
    }
    .baozhuang {
      .baozhuang-text {
        font-size: 12px;
        color: #c1bbbb;
      }
      .baozhuang-number {
        font-weight: 600;
        box-sizing: border-box;
        padding-top: 5px;
      }
    }
    .manyi {
      .manyi-text {
        font-size: 12px;
        color: #c1bbbb;
      }
      .manyi-number {
        font-weight: 600;
        box-sizing: border-box;
        padding-top: 5px;
      }
    }
  }
  .comment {
    background: #fff;
    .footer {
      text-align: center;
      font-size: 14px;
      color: #c1bbbb;
    }
    .comment-bar {
      height: 60px;
      text-align: center;
      box-sizing: border-box;
      padding: 10px 0;
      display: flex;
      .comment-wrap {
        display: flex;
        margin: auto;
        border: 1px solid #f3efef;
        border-radius: 5px;
        height: 32px;
        .comment-bar-icon {
          display: flex;
          width: 170px;
          box-sizing: border-box;
          background: #ffca4d;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          .span-wrap {
            align-items: center;
            justify-content: space-between;
            width: 95px;
            display: flex;
            margin: auto;
            span {
              display: inline-block;
              font-size: 14px;
              font-weight: 600;
            }
            .icon-meituan1 {
              font-size: 25px;
            }
          }
        }
        .comment-daodian {
          width: 170px;
          line-height: 32px;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
    .commentitem {
      box-sizing: border-box;
      padding: 20px 5px;
      border-bottom: 1px solid #f3efef;
      .commentheader {
        display: flex;
        width: 100%;
        height: 6vh;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 6px 12px;
        .headercontent {
          width: 105px;
          height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .thumb {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .users {
            height: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .usersname {
              color: #363431;
              font-size: 14px;
              font-weight: bolder;
            }
            .commenttime {
              font-size: 10px;
              color: #b1b1b1;
            }
          }
        }
      }
      .commenttext {
        width: 100%;
        box-sizing: border-box;
        padding: 20px 12px;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
  .seller {
    width: 100%;
    height: 600px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
</style>